<template>
	<view class="master_page">
		<view class="item" v-for="(item,index) in list" :key="index">
			<image :src="item.avatar"></image>
			<view class="among">
				<view style="font-size: 28rpx;font-weight: bold;">{{item.realname}} <span style="font-size: 24rpx;margin-left: 16rpx;">{{item.mobile}}</span></view>
				<view style="display: flex;margin-top: 10rpx;">
					<view class="sm">已实名</view>
				    <image src="../../static/order/star.png"></image>
					<view style="font-size: 24rpx;line-height: 48rpx;">积分剩余:{{item.start}}</view>
				</view>
			</view>
			<view class="right">
				<view class="money">￥{{item.total_price}}</view>
				<view class="btn" @click="hire(item.worker_id)">去雇佣</view>
			</view>
			<u-popup :show="pay_show" mode="bottom" :round="20" closeOnClickOverlay @close="down()" >
					<view class="pay_pop">
						<view>付款</view>
						<view class="pay_num">{{item.total_price}}</view>
						<view class="pay_item">
							<view style="display: flex;width: 60%;">
								<image class="pay_icon" src="../../static/wallet/ali.png"></image>
								<view class="text_pay">支付宝支付</view>
							</view>
							<image v-if="pay_type==1" class="sel_pay" src="../../static/wallet/yes.png"></image>
							<view class="pay_null" v-else @click="pay_type=1"></view>
							
						</view>
						<view class="pay_item">
							<view style="display: flex;width: 60%;">
								<image class="pay_icon" src="../../static/wallet/wx.png"></image>
								<view class="text_pay">微信支付</view>
							</view>
							<image v-if="pay_type==2" class="sel_pay" src="../../static/wallet/yes.png"></image>
							<view class="pay_null" v-else @click="pay_type=2"></view>
							
						</view>
						<view class="pay_item">
							<view style="display: flex;width: 60%;">
								<image class="pay_icon" src="../../static/wallet/mm.png"></image>
								<view class="text_pay">余额支付</view>
							</view>
							<image v-if="pay_type==3" class="sel_pay" src="../../static/wallet/yes.png"></image>
							<view class="pay_null" v-else @click="pay_type=3"></view>
						</view>
						<view class="pay_pop_btn" @click="orderPay()">确定</view>
					</view>
				</u-popup>
			</view>
		</view>
		
</template>

<script>
	import {baojiaList,toHire} from "../../api/index.js"
	export default {
		data() {
			return {
				order_id:'',
				pay_show:false,
				pay_type:3,
				list:[],
				worker_id:''
			}
		},
		onLoad(e) {
			this.order_id=e.id
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList(){
				baojiaList({order_id:this.order_id}).then(res=>{
					console.log(res);
					this.list=res.data
				})
			},
			hire(e){
				this.worker_id=e
				this.pay_show=true

			},
			down(){
				this.pay_show=false
			},
			orderPay(){
				let p ={
					order_id:this.order_id,
					worker_id:this.worker_id,
					type:this.pay_type,
					method:'app'
				}
				toHire(p).then(res=>{
					console.log(res);
					this.pay_show=false
					uni.showToast({
						icon:'success',
						title:'支付成功'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/order/order"
						})
					},800)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.master_page{
	width: 100%;
	height: auto;
	min-height: 100vh;
	background-color: #F9F9F9;
}
.item{
		width: 100%;
		height: 172rpx;
		background-color: #FFFFFF;
		padding: 32rpx;
		margin-top: 20rpx;
		display: flex;
		image{
			display: block;
			width: 80rpx;
			height: 80rpx;
            margin-top: 10rpx;
		}
		.among{
			width: 438rpx;
			height: 82rpx;
			margin-left: 32rpx;
			.sm{
				width: 104rpx;
				height: 40rpx;
				border-radius: 4rpx;
				border: 2rpx #00CC7B solid;
				color: #00CC7B;
				font-size: 24rpx;
				line-height: 40rpx;
				text-align: center;
			}
			image{
				width: 28rpx;
				height: 28rpx;
				margin-left: 32rpx;
				margin-right: 12rpx;
			}
		}
		.right{
			width: 150rpx;
			height: 100%;
			.money{
				font-size: 28rpx;
				font-weight: bold;
				color: #FA5A28;
				text-align: center;
			}
			.btn{
				width: 100%;
				height: 52rpx;
				line-height: 52rpx;
				border-radius: 8rpx;
				color: #FFFFFF;
				background-color: #00CC7B;
				text-align: center;
				font-size: 24rpx;
				margin-top: 16rpx;
			}
		}
}
.pay_pop{
		width: 100%;
		height: 634rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		padding: 32rpx;
		text-align: center;
		.pay_num{
			margin-top: 60rpx;
			color: #FA5A28;
			font-weight: bold;
			margin-bottom: 48rpx;
		}
		.pay_item{
			width: 100%;
			height: 48rpx;
			display: flex;
			margin-top: 32rpx;
			justify-content: space-between;
			.pay_icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 32rpx;
			}
			.text_pay{
				width: 60%;
				text-align: left;
				height: 48rpx;
				line-height: 48rpx;
				color: #666666;
				font-size: 28rpx;
			}
			.pay_null{
				width: 48rpx;
				height: 48rpx;
				border: 2rpx #999999 solid;
				border-radius: 100%;
			}
			.sel_pay{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.pay_pop_btn{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 128rpx;
			background-color: #00CC7B;
			color: #FFFFFF;
			margin-top: 140rpx;
		}
	}
</style>
